<template>
  <div>
    <el-main>
      <el-table :data="tableData">
        <el-table-column fixed prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column fixed prop="orderId" label="订单编号" width="240">
        </el-table-column>
        <el-table-column fixed prop="totalAmount" label="总金额" width="100"
          ><template slot-scope="scope">
            <i>$</i>
            <span style="margin-left: 10px">{{ scope.row.totalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed prop="paidAmount" label="实付金额" width="100">
          <template slot-scope="scope">
            <i>$</i>
            <span style="margin-left: 10px">{{ scope.row.paidAmount }}</span>
          </template></el-table-column
        >
        <el-table-column fixed prop="youhuiAmount" label="优惠折扣" width="100"
          ><template slot-scope="scope">
            <i>$</i>
            <span style="margin-left: 10px">{{ scope.row.youhuiAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed prop="createTime" label="创建时间" width="160">
        </el-table-column>
        <!-- 绿:#67C23A 红:#F56C6C 黄:#E6A23C 蓝:#409EFF 灰:#909399-->
        <el-table-column prop="status" label="状态" width="80"
          ><template slot-scope="scope">
            <span v-if="scope.row.status === 0" style="color: #409eff"
              >未支付</span
            >
            <span v-if="scope.row.status === 1" style="color: #909399"
              >已取消</span
            >
            <span v-if="scope.row.status === 2" style="color: #e6a23c"
              >待发货</span
            >
            <span v-if="scope.row.status === 3" style="color: #67c23a"
              >待收货</span
            >
            <span v-if="scope.row.status === 4" style="color: #67c23a"
              >已完成</span
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <!-- 0:未支付;1:已取消;2:待发货;3:待收货;4:已完成 -->
          <template slot-scope="scope">
            <span v-if="scope.row.status === 2"
              ><el-button
                @click="handleOrderStatusChange(scope.row, 3)"
                type="primary"
                icon="el-icon-back"
                size="small"
                plain
                >发货</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>
<script>
import { listOrders, changeStatus } from "@/api/order";
export default {
  name: "Order",
  data() {
    return {
      ruleForm: {},
      tableData: null,
    };
  },
  mounted() {
    this.getOrders();
  },
  methods: {
    getOrders() {
      listOrders().then((res) => {
        this.tableData = res;
      });
    },
    handleOrderStatusChange(val, m) {
      this.ruleForm = val;
      this.ruleForm.status = m;
      changeStatus(this.ruleForm).then((res) => {
        console.log(res);
        this.$message("修改完成");
        this.getOrders();
      });
    },
  },
};
</script>